<template>
	<view class="content">
		<uni-list class="hot-list">
			<uni-list-item :padding="24" v-for="(item, index) in hotList" :key="index"
				:title="'焊接编号' + item.F_WeldNum"
				:note="item.F_WeldTime"
				:rightText="item.totalResult"
        :rightColor="item.finalColor"
				:thumb="item.hotImage"
				@click="toHotDetail(index)"/>
		</uni-list>
    <view class="all-complete">{{totalPage ? '已加载全部' : '没有符合条件的记录'}}</view>
		<message ref="message"></message>
	</view>
</template>

<script>
	import uniList from '@/components/uni/uni-list.vue'
	import uniListItem from '@/components/uni/uni-list-item.vue'

  import {list} from "../../api/hot/list";

  import store from "@/store/index.js"

	export default {
		data() {
			return {
				hotList: [],
        query: {
          // 分页条件
          pagination: {
            rows: 20,
            page: 1
          },
          // 查询条件
					queryJson: {
            StartTime: '',
            EndTime: '',
            F_ProjectCode: '',
            F_MachineCode: '',
            F_WelderName: '',
            F_ResultId: ''
          }
        },
        // 是否是上拉加载更多，如果是，那么要把数据push到projectList中；如果不是那么要把数据替换projectList
        ifLoadMore: false,
        // 总页数
        totalPage: 0
			}
		},
		methods: {
      /**
       * 获取热熔记录数据
       */
      getList(callback) {
				list(this.query).then(res => {
					if (res.data.code === 200) {
            let list = res.data.data.rows.map(item => {
            	this.assignHotImage(item);
            	this.assignTotalResultAndColor(item);
              return item;
            })
            if (this.ifLoadMore) {
              this.hotList.push(...list);
            } else {
              this.hotList = list;
            }
            this.totalPage = res.data.data.total;
            callback && callback()
          }
        })
      },
			/**
			 * 给获取到的数据添加hotImage字段，该字段是显示的图片url
			 * @param item 热熔记录
			 */
			assignHotImage(item) {
      	item.hotImage =
					item.F_ResultCode === '1' && (item.F_ApperenceCode === '1' || item.F_ApperenceCode === '')
					? '/static/image/common/weld/success.png'
					: '/static/image/common/weld/fail.png';
			},
			/**
			 * 给获取到的数据添加totalResult字段，该字段是显示整个热熔状态的，包括成功与否以及外观合格与否
			 * 给获取到的数据添加finalColor字段，该字段是决定列表的右侧文字显示什么颜色
			 * @param item 热熔记录
			 */
			assignTotalResultAndColor(item) {
				let message;
				let color;
				if (item.F_ResultCode !== "1") {
					message = item.F_Result;
					color = '#DC2115';
				} else if (item.F_ApperenceCode === "") {
					message = item.F_Result + "/" + "外观评定暂无";
					color = '#999';
				} else if (item.F_ApperenceCode !== "1") {
					message = item.F_Result + "/" + "外观不合格";
					color = '#DC2115';
				} else {
					message = item.F_Result;
					color = '#999'
				}
				item.totalResult = message;
				item.finalColor = color;
			},
      /**
       * 修改page参数
       * 这里只是单纯修改，请配合getList方法一起使用
       * @param page 修改为第几页
       */
      changePage(page) {
        this.query.pagination.page = page;
      },
      /**
       * 下拉刷新时处理query，除了page设置为1外，其他都不变
       */
      refreshQuery() {
        this.changePage(1);
      },
      /**
       * 自增page
       */
      incrementPageForQuery() {
        let current = this.query.pagination.page;
        this.changePage(current + 1);
      },
			/**
			 * 跳转到热熔记录的详情页
			 * @param index 记录在hotList中的索引
			 */
			toHotDetail(index) {
			  uni.showLoading({
          title: '加载中，请稍后',
          mask: true
        })
        let hot = this.hotList[index];
				uni.navigateTo({
					url: '/pages/hot/detail?hot=' + encodeURIComponent(JSON.stringify(hot))
				})
        uni.hideLoading();
			}
		},
    /**
     * 开始下拉刷新
     */
    onPullDownRefresh () {
      // 将page更新为1
      this.refreshQuery();
      // 获取数据
      this.getList();
      // 停止下拉刷新
      uni.stopPullDownRefresh();
    },
    /**
     * 触发上拉加载更多
     */
    onReachBottom () {
      // 判断是不是已经到底部了，到底部就不去加载了
      if (this.query.pagination.page === this.total) {
        return;
      }
      // 设置为上拉加载更多
      this.ifLoadMore = true;
      // 使page自增1
      this.incrementPageForQuery();
      // 获取数据
      this.getList(() => {
        // 做完后恢复ifLoadMore为false
        this.ifLoadMore = false;
      });
    },
		components: {
			uniList, uniListItem
		},
    /**
     * 在onReady里获取符合条件的项目记录
     */
    onReady() {
      this.getList();
      this.$refs.message.setMessageToStore(this.$refs.message)
    },
    /**
     * 在onLoad里给搜索条件赋值
     * @param options 从search里传递过来的参数
     */
    onLoad(options) {
			if (JSON.stringify(options) !== "{}") {
				let query = JSON.parse(decodeURIComponent(options.query));
				if (query) {
					this.query.queryJson = query;
				}
			}
    },
    /**
     * 点击右上角首页按钮，跳转到首页
     */
    onNavigationBarButtonTap() {
      store.commit('returnToHome')
    }
	}
</script>

<style scoped lang="scss">
	@import "~@/static/css/weld/list.scss";
</style>

<style>
	page {
		background-color: #f5f5f5;
	}
</style>
